<!--
 * @Author: Liz.Zheng
 * @Date: 2021-12-31 10:35:50
 * @LastEditTime: 2023-02-16 10:12:03
 * @LastEditors: 郑亚莉 zhengyali@shequ.life
 * @Description: 合同收入
 * @Motto: Write the code. Change the world.
-->
<template>
  <section class="contract-income">
    <a-card v-for="(item, index) in dataSource" :key="index" :title="`${item.cost_type_txt}#应收(不含税)`" :class="index !== 0 ? 'mt-10' : ''">
      <a-table
        :dataSource="item?.list || []"
        :columns="columns"
        :pagination="false"
        rowKey="id"
      >
        <template #bodyCell="{ text, record, index, column }"></template>
        <template #footer>
          <a-row justify="end" align="middle">
            <a-col>
              {{item.cost_type_txt}}合计：￥{{item.total}}
            </a-col>
          </a-row>
        </template>
      </a-table>
    </a-card>
  </section>
</template>

<script>
import {defineComponent, ref, watch, computed, reactive, toRefs} from "vue";
import request from "../../../common/utils/request";
import store from "../../../store";

export default defineComponent({
  name: "ContractDetailIncome",
  props: {
    active: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const state = reactive({
      columns: [],
      dataSource: [],
    });

    const getColumns = () => {
      let _columns = [
        {
          title: "年份",
          dataIndex: "year_name",
          key: "year_name",
          width: 80,
        },
      ];
      for (let i = 1; i <= 12; i++) {
        _columns.push({
          title: `${i}月`,
          dataIndex: `month_${i}`,
          key: `month_${i}`,
          renderKey: 'monthRender',
          customRender: ({ text, record, index }) => {
            return record.hasOwnProperty(`month_${i}`) ? text : '--';
          },
        });
      }
      state.columns = _columns;
    };
    const getTableData = () => {
      request
        .get("/org", "/incomeConfirm/getIncomeConfirmDetail", {
          contract_id: store.getters.contractDetail.id,
          owner_id: store.getters.contractDetail.owner_id,
        })
        .then((res) => {
          let data = [];
          (res?.returnData || []).forEach((v) => {
            const years = Object.keys(v.data);
            let list = [];
            years.forEach((year) => {
              let obj = {
                year_name: year,
              }
              v.data[year].map((item) => {
                const arr = item?.y_m?.split("-");
                if (arr?.length > 1) {
                  obj[`month_${Number(arr[1])}`] = item.receivable_without_tax;
                }
              })
              list.push(obj);
            })
            v.list = list;
          })
          state.dataSource = res?.returnData || [];
        })
    };


    const init = () => {
      getColumns();
      getTableData();
    };

    let loaded = false;

    watch(
      () => props.active,
      (val) => {
        if (val && !loaded) {
          init();
        }
      }
    );

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped></style>
